import {
    ModalForm,
    ProFormDigit,
    ProFormText,
    ProFormTextArea
} from '@ant-design/pro-form';
import React, { useRef } from 'react';
import { message } from 'antd';
import type { ModalProps } from 'antd';
import type {
    ProFormInstance,
} from '@ant-design/pro-form';
import { useIntl } from 'umi';
import {
    postApiDataDictionaryCategory as Create,
    putApiDataDictionaryByIdCategory as Update,
} from '@/services/furion-cms/dataDictionary';

interface DetailProps {
    modalVisible?: boolean;
    recored?: API.DataDictionaryCategoryDetailDto;
    onUpdate?: () => void;
    onVisibleChange: (visit: boolean) => void;
    modalProps?: Omit<ModalProps, 'visible'>;
}

const DetailViewer: React.FC<DetailProps> = (props) => {
    const { modalVisible, onUpdate, onVisibleChange, modalProps, recored } = props;
    /**
   * @en-US International configuration
   * @zh-CN 国际化配置
   * */
    const intl = useIntl();

    // 绑定一个 ProFormInstance 实例
    const formRef = useRef<ProFormInstance<API.DataDictionaryCategoryDetailDto>>();

    const finishHandle = async (values: any) => {
        console.log('finishHandle', values);
        // 提交成功处理
        const successHandle = () => {
            // 清空数据
            message.success(intl.formatMessage({
                id: 'pages.dictionary.category.save.success',
                defaultMessage: '数据字典类别保存成功'
            }));
            onUpdate?.();
            return true;
        }

        if (recored?.id) {
            return Update({ id: recored.id }, values)
                .then(successHandle);
        }
        else {
            return Create(values)
                .then(successHandle);
        }
    };

    return (
        <ModalForm<API.DataDictionaryCategoryDetailDto>
            title={recored?.id ? intl.formatMessage({
                id: 'pages.dictionary.category.detail.title.edit',
                defaultMessage: '编辑字典类别'
            }) : intl.formatMessage({
                id: 'pages.dictionary.category.detail.title.create',
                defaultMessage: '创建字典类别'
            })}
            modalProps={{
                destroyOnClose: true,
                width: 420,
                maskClosable: false,
                ...modalProps
            }}
            visible={modalVisible}
            initialValues={recored}
            onFinish={finishHandle}
            formRef={formRef}
            onVisibleChange={onVisibleChange}
        >
            <ProFormText
                name="name"
                label={intl.formatMessage({
                    id: 'pages.dictionary.category.name',
                    defaultMessage: '类别名称'
                })}
                placeholder={intl.formatMessage({
                    id: 'pages.dictionary.category.name.placeholder',
                    defaultMessage: '请输入字典类别名称'
                })}
                rules={[
                    {
                        required: true,
                        message: intl.formatMessage({
                            id: 'pages.dictionary.category.name.required',
                            defaultMessage: '字典类别名称必填'
                        })
                    }
                ]}
            />
            <ProFormDigit name="sortNumber"
                label={intl.formatMessage({
                    id: 'pages.dictionary.category.sortNumber',
                    defaultMessage: '排序号'
                })} />
            <ProFormTextArea
                name="description"
                label={intl.formatMessage({
                    id: 'pages.dictionary.category.description',
                    defaultMessage: '描述'
                })}
            />
        </ModalForm>
    )
}

export default DetailViewer;